<template>
  <ElCollapse v-model="state.activeName" accordion>
    <ElCollapseItem v-for="item in collpases" :key="item.name" :name="item.name" :title="item.name">
      <ul>
        <li v-for="sub in item.subs" :key="sub.name" @click="onChange(sub)">
          <SvgIcon :name="sub.icon" />
          <span :class="[activeAnalyse == sub.name ? 'active' : '']">{{ sub.name }}</span>
        </li>
      </ul>
    </ElCollapseItem>
    <ElCollapseItem name="模型" title="模型资源">
      <Model />
    </ElCollapseItem>
  </ElCollapse>
</template>

<script setup>
  import { ElCollapse, ElCollapseItem } from 'element-plus';
  import { computed, reactive } from 'vue';
  import mapStore from '@/store/modules/map';
  import Sight from './components/Sight.vue';
  import Slope from './components/Slope.vue';
  import Aspect from './components/Aspect.vue';
  import useDialog from '@/hooks/useDialog';
  import Model from './components/Model.vue';
  import Sunshine from './components/Sunshine.vue';
  import Shadow from './components/Shadow.vue';
  import HeightResctriction from './components/HeightRestriction.vue';

  const collpases = [
    {
      name: '空间分析',
      subs: [
        {
          comp: HeightResctriction,
          name: '限高模拟',
          icon: 'height',
        },

        {
          comp: Sight,
          name: '空间通视',
          icon: 'sight',
        },
        {
          comp: Sunshine,
          name: '日照统计',
          icon: 'sunshine',
        },
        {
          comp: Shadow,
          name: '阴影统计',
          icon: 'shadow',
        },
      ],
    },
    {
      name: '地形分析',
      subs: [
        {
          comp: Aspect,
          name: '坡向分布',
          icon: 'aspect',
        },
        {
          comp: Slope,
          name: '坡度分布',
          icon: 'slope',
        },
      ],
    },
  ];
  const state = reactive({
    activeName: collpases[0].name,
  });
  const activeAnalyse = computed(() => mapStore.getActiveAnalyse);

  const { createDialog, clearDialog } = useDialog();
  let dialogContainer = null;

  function dialogClose() {
    clearDialog(dialogContainer);
    dialogContainer = null;
  }
  function onChange(item) {
    if (dialogContainer != null) {
      dialogClose();
    }
    if (item.name == activeAnalyse.value) {
      mapStore.setActiveAnalyse('');
      return;
    }
    mapStore.setActiveAnalyse(item.name);
    dialogContainer = createDialog({
      title: item.name,
      component: item.comp,
      width: '18em',
      height: '8em',
      top: '8em',
      right: '1em',
      onClose: () => {
        dialogClose();
        mapStore.setActiveAnalyse('');
      },
    });
  }
</script>

<style scoped lang="scss">
  $a--color: rgb(65, 120, 230);
  ul {
    list-style: none;
    li {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 1em;
      cursor: pointer;
      &:hover {
        opacity: 0.7;
        span {
          color: $a--color;
        }
      }
      margin: 1em 0em;
      span {
        &.active {
          color: $a--color !important;
        }
      }
    }
  }
</style>
